<template>
  <div v-show="cover" :cover="cover">
    <h2 @click="coverTest">关闭</h2>
    <h2>效果一:显示TODO列表时,已完成的TODO为绿色</h2>
    <!-- 子组件无法决定结构与外观 -->
    <List :todos="todos">
      <template slot-scope="todo">
        <span :style="{ color: todo.todo.isComplete ? 'green' : 'red' }">{{
          todo.todo.text
        }}</span>
      </template>
    </List>
    <hr />
    <h2>效果二:显示TODO列表时,有序号,已完成的TODO为蓝绿色</h2>
    <List1 :todos="todos">
      <template slot-scope="{ todo, $index }">
        <span :style="{ color: todo.isComplete ? 'red' : 'purple' }">
          {{ $index }}--{{ todo.text }}
        </span>
      </template>
    </List1>
  </div>
</template>

<script>
import List from "./List/List.vue";
import List1 from "./List/List1.vue";
export default {
  name: "ScopeSlotTest",
  props: { cover: { type: Boolean, default: false } },
  data() {
    return {
      todos: [
        { id: 1, text: "AAA", isComplete: false },
        { id: 2, text: "BBB", isComplete: true },
        { id: 3, text: "CCC", isComplete: false },
        { id: 4, text: "DDD", isComplete: false },
      ],
    };
  },
  components: {
    List,
    List1,
  },
  methods: {
    coverTest() {
      this.$emit("ttt");
    },
  },
};
</script>

<style>
</style>